<template>
    <div class="containe" style="background-color: #eee;">
        <levelMenu types="/community/expert" @jsonListChange="jsonListChange"></levelMenu>
        <div class="flexthree-boxs cp-container">
            <el-row :gutter="16" v-loading="loading">
                <el-col :span="8" v-for="(item,i) in lists" :key="i">
                    <expert-list :item="item"></expert-list>
                </el-col>
            </el-row>
            <!--  -->
        </div>
        <div v-if="showNo" class="f-no-data">
            <i class="i-no-data icon icon-no-data"></i>
            <p>暂无数据</p>
        </div>
        <div class="block" style="margin:0px auto; text-align: center;padding:30px 0 80px 0;">
            <el-pagination
                v-if="!showNo"
                class="public-page"
                background
                layout="prev, pager, next"
                :current-page="jsonList.pageNumber"
                :page-size="15"
                @current-change="handleCurrentChange"
                :total="total">
            </el-pagination>
        </div>
        <!-- <div v-if="!loading && total === 0" class="no-data">
            <span class="icon icon-no-data">
                <span>暂无服务</span>
            </span>
        </div> -->
    </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator'
import levelMenu from '~/components/common/levelMenu.vue'
import expertList from '~/components/common/expertList.vue'
import {communityExpertPage} from '~/api/community'
@Component({
    layout: 'community',
    components: {
        levelMenu,
        expertList
    },
    head () {
        return {
            title: '专家中心-CIIP社群中心',
            meta: [
                {hid: 'description', name: 'description', content: '社群中心建筑行业专家，在这里可以找到建筑行业各个领域的专家，可以预约专家为您答疑解惑或者提供相应的服务。'},
                {hid: 'keyword', name: 'keyword', content: '建筑业专家，专家服务，找专家，设计师'}
            ]
        }
    }
})
export default class CommunityExpertIndex extends Vue {
    total:number = 0
    keyWord:any = ''
    loading:boolean = false
    showNo:boolean = false
    lists:any = []
    file:any = this.$store.state.basefile
    jsonList:any = {
        expertClassId: '',
        sortType: '',
        serAndPrice: '',
        expertServiceType: '',
        areaId: '',
        pageNumber: 1,
        pageSize: 15,
        keyWord: ''
    }
    @Watch('$route', {immediate: true})
    routerchange (to: any) {
        this.jsonList.keyWord = to.query.wordText
        this.jsonListChange(this.jsonList)
    }
    mounted () {
        // this.jsonList.keyWord = this.$route.query.wordText
        // this.jsonListChange(this.jsonList)
        this.communityExpertPage()
        // console.log(this.$route.query.wordText)
    }
    handleCurrentChange (val:any) {
        // console.log(val)
        this.jsonList.pageNumber = val
        // console.log(this.jsonList.pageNumber)
        this.communityExpertPage()
        // this.jsonList.pageNumber = val
        // this.getxqList()
    }
    jsonListChange (val:any) {
        // console.log(val)
        this.jsonList = {
            expertClassId: val.classId || '',
            sortType: val.sort || 'DESC',
            serAndPrice: val.sortField || 'COMPREHENSIVE',
            expertServiceType: val.type || '',
            areaId: val.areaIds || '',
            pageNumber: 1,
            pageSize: 15,
            keyWord: val.keyWord || ''
        }
        this.communityExpertPage()
    }
    async communityExpertPage () {
        this.loading = true
        const {data}:any = await communityExpertPage(this.jsonList)
        // console.log(data.data)
        if (data.code >= 0) {
            let obj = {}
            for (let i = 0; i < data.data.content.length; i++) {
                if (data.data.content[i].city !== '') {
                    //  检查那个数据有问题
                    // console.log(data.data.content[i].city)
                    data.data.content[i].city = JSON.parse(data.data.content[i].city)
                } else {
                    data.data.content[i].city = ''
                }
                if (data.data.content[i].createUserId) {
                    if (data.data.content[i].createUserId === 16736) {
                        // console.log(data.data.content[i])
                        obj = data.data.content[i]
                        data.data.content.splice(i, 1)
                        data.data.content.unshift(obj)
                    }
                }
            }
            // data.data.content.unshift(obj)
            this.lists = data.data.content
            this.total = data.data.totalElements
            // console.log(data.data)
            this.loading = false
            if (this.lists.length === 0) {
                this.showNo = true
            } else {
                this.showNo = false
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .flexthree-boxs {
        .el-col {
            padding: 8px 0;
        }
    }
</style>
